// 函数组件
// import './child1.css'

// const name = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }]
// export default function child1(props) {
//     return (
//         <>
//             <div className="child1"></div>
//             <ul>{name.map(item => {
//                 return <li key={item.id}>{item.name}</li>
//             })}</ul>
//             <h1>{props.msg}</h1>
//             <button onClick={() => { props.callback('to app') }}>toapp</button>
//         </>
//     )
// }

// 类组件
import './child1.css'
import { Component } from 'react'

export default class child1 extends Component {
    constructor() {
        super()
        this.list = [
            { id: 1, name: 'react' },
            { id: 2, name: 'vue' }
        ]
    }

    state = { // 这样写相当于在constructor中写this.state
        count: 0,
        msg: ''
    }

    // react中类编程，函数体中this默认会丢失，是undefined，因此改成箭头函数
    setCount = () => {
        console.log(this);
        this.setState({ // setState从Component类中继承过来的
            count: this.state.count + 1
        })
    }
    changeHandler = (e) => {
        console.log(e.target.value);
        this.setState({
            msg: e.target.value
        })
    }
    //     在 class 写法中， constructor 定义的值可以直接拿到最前面去写，并且不需要使用 this，
    // 但是用的时候需要用 this，另外 react 中的 class 的 this 在函数中是会丢失的，因此里面的函数需要写成箭头函数，
    // 让 this 指向 class，这里的 setState 我们并没有写过，这说明这个 setState 是来自 Component 中继承而来的。

    // 另外组件中的状态一定要命名为 state

    onDel(id) { // 相当于写到了原型上
        console.log(id);
    }

    render() {
        return (
            <div>
                <p>外部类组件</p>
                <ul>
                    {
                        this.list.map(item => (
                            <li key={item.id}>
                                <span>{item.name}</span>
                                <button onClick={() => this.onDel(item.id)}>x</button>
                            </li>
                        ))
                    }
                </ul>
                <button onClick={this.setCount}>计数器 -- {this.state.count}</button>
                <input type="text" value={this.state.msg} onChange={this.changeHandler} />
            </div>
        )
    }
}